<!DOCTYPE html>
<html lang="en" xmlns:sec=http://www.thymeleaf.org/extras/spring-security
      xmlns:th=http://www.thymeleaf.org>
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!-- =====  CSS  ===== -->
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
  <link rel="shortcut icon" href="images/favicon.png">
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body>
<!-- =====  HEADER START  ===== -->
<div class="wrapper">
<header id="header" th:fragment="topbar">
  <div class="header-top">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4">
          <div class="header-top-left">
            <div class="contact"><span class="hidden-xs hidden-sm hidden-md">7*24全天营业</span></div>
          </div>
        </div>
        <div sec:authorize="!isAuthenticated()" class="col-xs-12 col-sm-8">
          <ul class="header-top-right text-right">
            <li class="account"><a href="/toLogin">登录</a></li>
          </ul>
        </div>
        <div sec:authorize="isAuthenticated()" class="col-xs-12 col-sm-8">
          <ul class="header-top-right text-right">
            <a href="/toUser"><li class="account" sec:authentication="name"></li></a>
            <li class="account"><a href="/logout">注销</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4">
          <div class="main-search mt_40">
            <input id="search-input" name="search" value="" placeholder="搜索" class="form-control input-lg" autocomplete="off" type="text">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
              </span> </div>
        </div>
        <div class="navbar-header col-xs-6 col-sm-4"> <a class="navbar-brand" href="/index"> <img alt="themini" src="images/logo.png"> </a> </div>
        <div class="col-xs-6 col-sm-4 shopcart">
          <div id="cart" class="btn-group btn-block mtb_40">
            <button  type="button" class="btn" data-target="#cart-dropdown" data-toggle="collapse" aria-expanded="true"><span id="shippingcart">购物车</span><span id="cart-total" th:text="'商品('+(${session.cartList}==null?0:${session.cartList.size()})+')'"></span></button>
          </div>


          <script>
            function de(id) {
              $.ajax({
                url:"/deCart/"+id,
                type:"post",
                success:function (data) {
                  $("#cart-total").html(data);
                  $("#cart-dropdown").load(location.href+" #cart-dropdown>*","");
                }
              });
            }
          </script>


<!--          购物车隐藏列表-->
          <div id="cart-dropdown" class="cart-menu collapse">
            <ul th:if="${session.cartList!=null}">
              <li>
                <table class="table table-striped">
                  <tbody>
                  <tr th:each="item:${session.cartList}">
                    <td class="text-center"><a><img width="70px" height="84px" th:src="'/watch/'+${item.getWatch().getImg_href()}" th:title="${item.getWatch().getTitle()}"></a></td>
                    <td class="text-left product-name"><a th:text="${item.getWatch().getWatch_name()}"></a> <span class="text-left price" th:text="'￥'+${item.getWatch().getPrice()}"></span>
                      <input class="cart-qty" name="product_quantity" min="1" th:value="${item.getCount()}" type="number">
                    </td>
                    <td class="text-center"><a class="close-cart" th:onclick="|javascript:de('${item.getWatch().getWatch_id()}')|"><i class="fa fa-times-circle"></i></a></td>
                  </tr>
                  </tbody>
                </table>
              </li>

              <li>
                <form action="">
                  <input class="btn pull-right mt_10" value="结算" type="submit">
                </form>
              </li>
            </ul>
          </div>



        </div>
      </div>

      <nav class="navbar">
        <p>menu</p>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="i-bar"><i class="fa fa-bars"></i></span></button>
        <div class="collapse navbar-collapse js-navbar-collapse">
          <ul id="menu" class="nav navbar-nav">
            <li> <a href="/index">首页</a></li>
            <li class="dropdown mega-dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">分类 </a>
              <ul class="dropdown-menu mega-dropdown-menu row">
                <li class="col-md-3">
                  <ul>
                    <li class="dropdown-header">女款</li>
                    <li><a href="/toShop">经典</a></li>
                    <li><a href="/toShop">唯美</a></li>
                    <li><a href="/toShop">清新</a></li>
                    <li><a href="/toShop">商务</a></li>

                  </ul>
                </li>
                <li class="col-md-3">
                  <ul>
                    <li class="dropdown-header">男款</li>
                    <li><a href="/toShop">商务</a></li>
                    <li><a href="/toShop">学生</a></li>
                    <li><a href="/toShop">清爽</a></li>
                    <li><a href="/toShop">时尚</a></li>

                  </ul>
                </li>
                <li class="col-md-3">
                  <ul>
                    <li class="dropdown-header">儿童款</li>
                    <li><a href="/toShop">卡通</a></li>
                    <li><a href="/toShop">漫威联名</a></li>
                    <li><a href="/toShop">简约</a></li>
                  </ul>
                </li>
                <li class="col-md-3">
                  <ul>
                    <li id="myCarousel" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                        <div class="item active"> <a href="#"><img src="images/menu-banner1.jpg" class="img-responsive" alt="Banner1"></a></div>
                        <!-- End Item -->
                        <div class="item"> <a href="#"><img src="images/menu-banner2.jpg" class="img-responsive" alt="Banner1"></a></div>
                        <!-- End Item -->
                        <div class="item"> <a href="#"><img src="images/menu-banner3.jpg" class="img-responsive" alt="Banner1"></a></div>
                        <!-- End Item -->
                      </div>
                      <!-- End Carousel Inner -->
                    </li>
                    <!-- /.carousel -->
                  </ul>
                </li>
              </ul>
            </li>
            <li> <a href="/toShop">商城</a></li>
          </ul>
        </div>

      </nav>
    </div>
  </div>
</header>
</div>
<script src="js/jQuery_v3.1.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.firstVisitPopup.js"></script>
<script src="js/custom.js"></script>
</body>
</html>